<template>
  <div>
    <el-input v-model="input" placeholder="输入音频名" size="mini" style="width: 200px"></el-input>

    <el-button size="mini"  @click="selectBookname()">普通查询</el-button>

    <el-button size="mini"  @click="addbookView">新增</el-button> <br>
    <template>
      <template>
        <el-select v-model="bookName"  placeholder="关联期刊" size="mini" @change="getAttrPer">
          <el-option
            v-for="item in bookNames"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>

        <el-select v-model="bookdataperiodq"  placeholder="期数" size="mini">
          <el-option
            v-for="item in bookdataperiods"
            :key="item.id"
            :label="item.periodical"
            :value="item.id">
          </el-option>
        </el-select>



      </template>

    </template>



    <el-button size="mini"  @click="selectRelateShip()">关系查询</el-button>






    <template>
      <el-table
        v-loading="loading"
        :data="bookdata"
        border
        height="680"
        style="width: 100%;">


        <el-table-column
          prop="cate_name"
          label="关联期刊名">
        </el-table-column>

        <el-table-column
          prop="name"
          label="音频名">
        </el-table-column>

        <el-table-column
          prop="periodical"
          label="期数">
        </el-table-column>

        <el-table-column
          prop="page"
          label="篇">
        </el-table-column>

        <el-table-column
          prop="path"
          label="音频路径">
        </el-table-column>

        <el-table-column
          prop="chapterRecomm"
          label="节目介绍">
        </el-table-column>

        <el-table-column
          prop="paymodedesc"
          label="收费方式">
        </el-table-column>

        <el-table-column
          prop="price"
          label="价格">
        </el-table-column>

        <el-table-column
          prop="playcount"
          label="节目播放量">
        </el-table-column>





        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="modify(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteIp(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :currentPage=currentPage4
      :page-sizes="[100, 200, 300, 400]"
      :page-size=pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>





    <el-dialog title="新增音频" :visible.sync="dialogFormVisible" size="mini" style="width: 100%;height: 100%;"   :fullscreen=true>
      <el-form :model="form" size="mini" :inline="true" >
        <el-form-item label="音频名字" :label-width="formLabelWidth" >
          <el-input v-model="form.name" ></el-input>
        </el-form-item>

        <el-form-item label="关联期刊数" :label-width="formLabelWidth" >
          <el-input v-model="form.selectName" @focus="relate()"></el-input>
        </el-form-item>

        <el-form-item label="篇" :label-width="formLabelWidth" >
          <el-input v-model="form.page"></el-input>
        </el-form-item>




        <el-form-item label="节目时长" :label-width="formLabelWidth" >
          <el-input v-model="form.chapterDuration"></el-input>
        </el-form-item>


        <el-form-item label="收费方式" :label-width="formLabelWidth" >
        <!--  <el-input v-model="form.payMode"></el-input>-->
          <el-select v-model="form.payMode" placeholder="请选择">
          <el-option
            v-for="item in payModes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
          </el-select>
        </el-form-item>



        <el-form-item label="价格" :label-width="formLabelWidth" >
          <el-input v-model="form.price"></el-input>
        </el-form-item>



        <el-form-item label="简介" :label-width="formLabelWidth" >
          <el-input v-model="form.chapterRecomm"></el-input>
        </el-form-item>






        <el-form-item label="上传Mp3" :label-width="formLabelWidth" >
          <el-upload class="upload-demo" size="mini" ref="upload1" :action=upfileUrl :on-preview="handlePreview" :on-success="uploadSuccess"
                     :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :multiple=false :limit=1>
            <el-button slot="trigger" size="small" type="primary">选取音频</el-button>
            <!--  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="addBook()" size="mini"> 确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="修改" :visible.sync="dialogFormVisible2" size="mini" style="width: 100%;height: 100%;"   :fullscreen=true>
      <el-form :model="form" size="mini" :inline="true" >
        <el-form-item label="期刊" :label-width="formLabelWidth" >
          <el-input v-model="form.name" ></el-input>
        </el-form-item>

        <el-form-item label="关联期刊数" :label-width="formLabelWidth" >
          <el-input v-model="form.selectName" @focus="relate()"></el-input>
        </el-form-item>

        <el-form-item label="篇" :label-width="formLabelWidth" >
          <el-input v-model="form.page"></el-input>
        </el-form-item>



        <el-form-item label="节目时长" :label-width="formLabelWidth" >
          <el-input v-model="form.chapterDuration"></el-input>
        </el-form-item>


        <el-form-item label="收费方式" :label-width="formLabelWidth" >
          <!--  <el-input v-model="form.payMode"></el-input>-->
          <el-select v-model="form.payMode" placeholder="请选择">
            <el-option
              v-for="item in payModes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>



        <el-form-item label="价格" :label-width="formLabelWidth" >
          <el-input v-model="form.price"></el-input>
        </el-form-item>



        <el-form-item label="简介" :label-width="formLabelWidth" >
          <el-input v-model="form.chapterRecomm"></el-input>
        </el-form-item>












        <el-form-item label="上传Mp3" :label-width="formLabelWidth" >
          <el-upload class="upload-demo" size="mini" ref="upload1" :action=upfileUrl :on-preview="handlePreview" :on-success="uploadSuccess"
                     :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :multiple=false :limit=1>
            <el-button slot="trigger" size="small" type="primary">选取音频</el-button>
            <!--  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
          </el-upload>
        </el-form-item>



















      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="updateContent()" size="mini"> 确 定</el-button>
      </div>
    </el-dialog>
















    <el-dialog title="选择" :visible.sync="dialogFormVisible1" size="mini" style="width: 100%;height: 100%">

      <template>
        <el-table
          :data="bookdataperiod"
          border
          height="680"
          style="width: 100%;">
          <el-table-column
            prop="name"
            label="期刊杂志">
          </el-table-column>

          <el-table-column
            prop="path"
            label="期数">
          </el-table-column>

          <el-table-column
            prop="coverpath"
            label="封面路径">
          </el-table-column>


          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="selectPeriod(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>





    </el-dialog>








  </div>
</template>

<script>


  import axios from 'axios';


  export default {
    name: 'HelloWorld',
    data() {
      return {
        bookdata:[],
        dialogFormVisible:false,
        form:{},
        formLabelWidth:"180px",
        input:"",
        total:0,
        fileList:[],
        upfileUrl:"",
        upfileUrlCover:"",
        currentPage4:1,
        pageSize:100,
        updateTime:0,
        dialogFormVisible1:false,
        bookdataperiods:[],
        dialogFormVisible2:false,
        loading:false,
        bookName:"",
        bookdataperiod:"",
        bookNames:[],
        bookdataperiodq:"",
        payModes:[{
          value: '0',
          label: '免费'
        },{
          value: '1',
          label: '付费'
        }],

      }
    },


    methods: {
      addbookView(){

        delete this.form.name;
        delete this.form.page;
        console.log(this.bookdataperiodq);
        this.form.audioAttrId=this.bookdataperiodq;
        if(this.form.audioAttrId==null||this.form.audioAttrId==""){
          this.$message("选择期刊");
        }else{
          this.dialogFormVisible=true;
        }



      },


      getPage(obj) {
        axios.post(process.env.BASE_API + 'audioContent/getMember', obj).then(respone => {
          this.bookdata = respone.data.member;
          this.total = respone.data.total;
        })
          .catch(error => {

          });





      },


      handleSizeChange(val) {
        this.pageSize = `${val}`;
        let pageSize = this.pageSize;
        let obj = {
          "currentPageNum": 1,
          "endIndex": 0,
          "pageSize": parseInt(pageSize),
          "total": 0
        }

        this.getPage(obj);
      },
      handleCurrentChange(val) {
        this.currentPage4 = `${val}`;


        let obj = {
          "currentPageNum":parseInt(this.currentPage4),
          "endIndex": 0,
          "pageSize": parseInt(this.pageSize),
          "total": 0
        }

        this.getPage(obj);

      },
      handleRemove(file, fileList){
        console.log(file, fileList);
      },
      handlePreview(){

      },
      //查询
      selectBookname(){

        if(this.input==null|this.input==""){
          let obj = {
            "currentPageNum":parseInt(this.currentPage4),
            "endIndex": 0,
            "pageSize": parseInt(this.pageSize),
            "total": 0
          }
          this.getPage(obj);
          return ;
        }


        let obj={
          name:this.input
        }
        axios.post(process.env.BASE_API + 'audioContent/selectName', obj).then(respone => {
          this.bookdata = respone.data;
        }).catch(error => {

        });

      },
      addBook(){

        delete this.form.selectName;
        delete this.form.id;

        this.form.uuid=Date.parse(new Date())+"";


        if(this.form.payMode==1){
          this.form.payMode=1;
          this.form.paymodedesc="付费";
        }else {
          this.form.payMode=0;
          this.form.paymodedesc="免费";
        }












        this.upfileUrl=process.env.BASE_API+"audioContent/upfile/"+ this.form.uuid;
        //记录书名
        let obj={mBookMagament:this.form,mPage:{"currentPageNum":parseInt(this.currentPage4),
            "endIndex": 0,
            "pageSize": parseInt(this.pageSize),
            "total": 0}};
        axios.post(process.env.BASE_API + 'audioContent/add', obj).then(respone => {
          this.bookdata = respone.data.member;



        //  console.log( this.upfileUrl +"   "+ this.upfileUrlCover);
          this.$refs.upload1.submit();
         // this.$refs.upload2.submit();
          this.dialogFormVisible=false;
      //    this.form={};
        }).catch(error => {
          this.$message("新增错误");
          this.dialogFormVisible=false;
        });



      },

      //选择
      selectPeriod(row){
          this.form.selectName=row.name;
          this.form.audioAttrId=row.id;
        this.dialogFormVisible1=false;

      },

      relate(){
        this.dialogFormVisible1=true;
      },
      deleteIp(row){

        console.log(row);

        let obj={
          "mBookMagament":row,
          "mPage": {
            "currentPageNum": 1,
            "endIndex": 0,
            "pageSize": 100,
            "total": 0
          }
        }


        axios.delete(process.env.BASE_API + "audioContent/deleteByPrimaryKey", {data: obj}).then(respone => {
          this.bookdata = respone.data.member;
         // debugger
          //this.$refs.upload1.submit();
          this.dialogFormVisible=false;
          this.form={};
        })
          .catch(error => {

          })
      },
      /*handleClose(){

      },*/
      modify(row){


        this.dialogFormVisible2=true;
        this.form=row;



      },

      //上传成功
      uploadSuccess(){
        let obj = {
          "currentPageNum":parseInt(this.currentPage4),
          "endIndex": 0,
          "pageSize": parseInt(this.pageSize),
          "total": 0
        }
        this.getPage(obj);

        this.fileList=[];


      },
      updateContent(){
        delete this.form.selectName;

        this.form.uuid=Date.parse(new Date())+"";


        if(this.form.payMode==1){
          this.form.payMode=1;
          this.form.paymodedesc="付费";
        }else {
          this.form.payMode=0;
          this.form.paymodedesc="免费";
        }




        this.upfileUrl=process.env.BASE_API+"audioContent/upfile/"+ this.form.uuid;

        let obj={
          "mBookMagament": this.form,
          "mPage": {
            "currentPageNum": 1,
            "endIndex": 0,
            "pageSize": 100,
            "total": 0
          }
        }

        axios.post(process.env.BASE_API + "audioContent/updateByPrimaryKeySelective",obj).then(respone => {
          this.bookdata = respone.data.member;
          this.$refs.upload1.submit();
          this.dialogFormVisible2=false

        })
          .catch(error => {

          })


      },
      getAttrPer(){
        this.bookdataperiodq="";
        axios.get(process.env.BASE_API + 'aduioAttr/getAttrsSelectCont/'+this.bookName).then(respone => {
          this.bookdataperiods=respone.data.date;
        }).catch(error => {

        });
      },

      selectRelateShip(){

        let obj={
          "currentPageNum": 1,
          "endIndex": this.bookName,
          "pageSize": 1,
          "total": this.bookdataperiodq
        }

        axios.post(process.env.BASE_API + 'audioContent/getPageAudioCondition',obj).then(respone => {
              this.bookdata = respone.data.date;
        }).catch(error => {

        });

      },





    },


    mounted() {
      let obj = {
        "currentPageNum":parseInt(this.currentPage4),
        "endIndex": 0,
        "pageSize": parseInt(this.pageSize),
        "total": 0
      }
      this.getPage(obj);

      //关联
     axios.post(process.env.BASE_API + 'aduioAttr/getMember', obj).then(respone => {
        this.bookdataperiod = respone.data.member;
      })
        .catch(error => {
        });


      axios.get(process.env.BASE_API + 'audio/getAllName').then(respone => {
        this.bookNames=respone.data.date;
      })
        .catch(error => {
        });









    },




  }
</script>

<style scoped>



</style>
